import { Image, Typography } from 'antd';
const { Paragraph } = Typography;

export const columns = ({ handleEdit }) => [
  {
    title: '质检ID',
    dataIndex: 'id',
    width: 60,
    search: false,
  },
  {
    title: 'SPU编码',
    width: 100,
    dataIndex: 'spuCode',
  },
  {
    title: '关联商品ID',
    width: 100,
    dataIndex: 'spuItemDtos',
    search: false,
    render: (_, record) => {
      return (
        <div>
          {(record?.spuItemDtos || []).map((item) => (
            <div>
              <a key={item?.id}>{item?.itemId}</a>
            </div>
          ))}
        </div>
      );
    },
  },
  {
    title: '质检状态',
    dataIndex: 'qualityState',
    width: 60,
    valueType: 'select',
    fieldProps: {
      options: [
        { label: '无', value: 0 },
        { label: '有', value: 1 },
      ],
    },
  },
  {
    title: '质检名称',
    width: 100,
    dataIndex: 'qualityName',
    search: false,
  },
  {
    title: '质检主图',
    width: 100,
    dataIndex: 'qualityImage',
    search: false,
    render: (txt) => (
      <div style={{ width: 80, height: 80 }}>
        <Image width={80} height={80} src={txt} fallback={fallback} />
      </div>
    ),
  },
  {
    title: '跳转商品',
    width: 120,
    dataIndex: 'itemDto',
    search: false,
    render: (_, record) => (
      <div style={{ display: 'flex', flexDirection: 'row' }}>
        <div style={{ width: 80, height: 80 }}>
          <Image width={80} height={80} src={record?.itemDto?.mainGraph} fallback={fallback} />
        </div>
        <div
          style={{
            height: 80,
            marginLeft: 5,
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
          }}
        >
          <Paragraph
            ellipsis={{
              rows: 3,
            }}
          >
            {record?.itemDto?.itemName}
          </Paragraph>
          <div>ID:{record?.itemDto?.id}</div>
        </div>
      </div>
    ),
  },
  {
    title: '更新时间',
    key: 'showTime',
    width: 120,
    dataIndex: 'updateTime',
    valueType: 'dateTime',
    hideInSearch: true,
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    valueType: 'dateRange',
    hideInTable: true,
    search: {
      transform: (value) => {
        return {
          updateStartTime: `${value[0]} 00:00:00`,
          updateEndTime: `${value[1]} 23:59:59`,
        };
      },
    },
  },
  {
    title: '操作',
    fixed: 'right',
    width: 40,
    search: false,
    valueType: 'option',
    key: 'option',
    render: (_, record) => (
      <a type="link" size="small" onClick={() => handleEdit(record)}>
        编辑
      </a>
    ),
  },
];

const fallback =
  '';
